<template>
  <div>
    <h1>修改主题颜色</h1>
    <div>
      <a-row :gutter="[20, 20]" type="flex" justify="center">
        <a-col :md="12" :lg="12" :xl="12">
          <Sketch v-model:value="color"></Sketch>
        </a-col>
        <!-- <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <Swatch v-model:value="color"></Swatch>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <Chrome v-model:value="color"></Chrome>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <Compact v-model:value="color"></Compact>
        </a-col> -->
      </a-row>
    </div>
    <div>
      <input ref="myColor" type="color" :value="colorValue" @input="colorChange" />
    </div>
    <div>
      <a-button type="primary" @click="updatePrimaryColor">点击</a-button>
    </div>
    <div>
      <a-button type="primary">Primary Button</a-button>
      <a-button>Default Button</a-button>
      <a-button type="dashed">Dashed Button</a-button>
      <a-button type="text">Text Button</a-button>
      <a-button type="link">Link Button</a-button>
    </div>
    <a-table :columns="columns" :data-source="data" :scroll="{x: 1500, y: 400}" class="components-table-demo-nested">
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'operation'">
          <a>Publish</a>
        </template>
      </template>
      <template #expandedRowRender>
        <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
          <template #bodyCell="{ column }">
            <template v-if="column.key === 'state'">
              <span>
                <a-badge status="success" />
                Finished
              </span>
            </template>
            <template v-else-if="column.key === 'operation'">
              <span class="table-operation">
                <a>Pause</a>
                <a>Stop</a>
                <a-dropdown>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>Action 1</a-menu-item>
                      <a-menu-item>Action 2</a-menu-item>
                    </a-menu>
                  </template>
                  <a>
                    More
                    <down-outlined />
                  </a>
                </a-dropdown>
              </span>
            </template>
          </template>
        </a-table>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { DownOutlined } from '@ant-design/icons-vue'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { Sketch } from '@/components/vue-color'
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
  { title: 'Version', dataIndex: 'version', key: 'version' },
  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
  { title: 'Action', key: 'operation', fixed: 'right' }
]

// interface DataItem {
//   key: number;
//   name: string;
//   platform: string;
//   version: string;
//   upgradeNum: number;
//   creator: string;
//   createdAt: string;
// }

// const data: DataItem[] = []
const data = reactive<Array<any>>([])
for (let i = 0; i < 20; ++i) {
  data.push({
    id: 10 + i,
    key: i,
    name: `Screem ${i + 1}`,
    platform: 'iOS',
    version: '10.3.4.5654',
    upgradeNum: 500,
    creator: 'Jack',
    createdAt: '2014-12-24 23:12:00',
    endTime: '2022-01-12 10:01:10'
  })
}

const innerColumns = [
  { title: 'Date', dataIndex: 'date', key: 'date' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Status', key: 'state' },
  { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  {
    title: 'Action',
    dataIndex: 'operation',
    key: 'operation'
  }
]

interface innerDataItem {
  key: number;
  date: string;
  name: string;
  upgradeNum: string;
}

const innerData: innerDataItem[] = []
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: '2014-12-24 23:12:00',
    name: `This is production name ${i + 1}`,
    upgradeNum: 'Upgraded: 56'
  })
}
export default defineComponent({
  name: 'demo4',
  components: {
    DownOutlined,
    Sketch
  },
  setup () {
    const color = ref('#fff')
    const colorValue = ref('#ff0000')
    return {
      data,
      columns,
      innerColumns,
      innerData,
      color,
      colorValue
    }
  },
  watch: {
    color (newVal, oldVal) {
      this.updatePrimaryColor()
      console.log(newVal, oldVal)
    }
  },
  onMounted () {
    console.log('onMounted')
  },
  methods: {
    colorChange (e:any) {
      this.colorValue = e.target.value;
      (window as any).less.modifyVars({
        'primary-color': e.target.value,
        'btn-primary-bg': e.target.value
      }).then((res: any) => {
        console.log('成功')
      }).catch((res: any) => {
        console.log('错误')
      })
    },
    updatePrimaryColor () {
      (window as any).less.modifyVars({
        'primary-color': this.color,
        'btn-primary-bg': this.color
      }).then((res: any) => {
        console.log('成功')
      }).catch((res: any) => {
        console.log('错误')
      })
    }
  }
})
</script>
<style lang="less" scoped>
// .components-table-demo-nested /deep/ .ant-table-tbody > tr.ant-table-row:hover > td,
// .components-table-demo-nested /deep/ .ant-table-tbody > tr > td.ant-table-cell-row-hover{
//   background: rgba(8, 23, 241, 0.253)
// }
</style>
